<template>
    <div>
        <el-upload
            class="upload-demo"
            ref="upload"
            action="#"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture-card"
            :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return {
            fileList: [],
            dialogImageUrl: '',
            dialogVisible: false
        }
    },
    methods: {
        handleRemove (file, fileList) {
        },
        handlePreview (file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },
    }
}
</script>